<template>
	<div>
		<div class="tab-head">
			<div class="start-mask" :style="{ opacity: showStartMask ? 1 : 0 }"></div>
			<ul ref="headList">
				<li
					v-for="(item, index) in statues"
					:key="index"
					:style="{
						color: nowIndex === index ? 'var(--bl-brand-c)' : '#1F2329',
						fontWeight: nowIndex === index ? '600' : '400',
					}"
					@click="tabClick(index)"
				>
					{{ item.name }}
					<span
						v-if="
							allnum[item.num] !== 0 && item.num !== 'null' && allnum[item.num]
						"
						>({{ allnum[item.num] > 100 ? '99+' : allnum[item.num] }})</span
					>
					<div class="line" v-if="nowIndex === index"></div>
				</li>
			</ul>
			<div class="end-mask" :style="{ opacity: showEndMask ? 1 : 0 }"></div>
			<i
				v-if="nowIndex !== 2"
				class="low-code iconyidongduan-shaixuan"
				:style="{ color: isSX || isHasSX ? 'var(--bl-brand-c)' : '#8F959E' }"
				@click="clickisSX"
			/>
		</div>

		<template v-if="screenDead">
			<Screen
				v-show="isSX"
				@close="closeScreen"
				@ok="okScreen"
				:nowindex="nowIndex"
				:emitSort="nowIndex ? one_sort : two_sort"
				:screenList="nowIndex ? one_screenList : two_screenList"
			/>
		</template>

		<UnderApproval
			v-show="!isSX && nowIndex === 0"
			style="margin-top: 12px"
			:getappLi="getappLi"
			@getNewGetappLi="getNewGetappLi"
			ref="Ua"
			@Refresh="oneOnRefresh"
		/>

		<Closed
			v-show="!isSX && nowIndex === 1"
			style="margin-top: 12px"
			:getEndLi="getEndLi"
			@getNewEndLi="getNewEndLi"
			ref="Cl"
			@Refresh="twoOnRefresh"
		/>

		<Drafts
			v-show="!isSX && nowIndex === 2"
			style="margin-top: 12px"
			:getToTaskLi="getToTaskLi"
			@emitrefreshDrafts="emitrefreshDrafts"
			@getNewDrf="getNewDrafts"
			ref="Dr"
			@refresh="threeOnRefresh"
		/>
	</div>
</template>

<script setup lang="ts">
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { computed, onMounted, ref, watch } from 'vue'
import { useStore } from 'vuex'
import {
	getapplicationList,
	getListDraft,
	getAllCount,
	getDraftCount,
} from '../serve/api'
import UnderApproval from './UnderApproval.vue'
import Closed from './Closed.vue'
import Drafts from './Drafts.vue'
import Screen from './Screen.vue'
import { consolelog } from '@/utils'
//这里来获取值
const props = defineProps(['searchValue'])
const nowIndex: any = ref(0)
const isSX = ref(false)
const isHasSX = ref(false)
const one_page_index = ref(0)
const two_page_index = ref(0)
const three_page_index = ref(1)
const getappLi = ref([{}])
const getEndLi = ref([{}])
const getToTaskLi = ref([{}])
const allnum: any = ref({ approve_count: 0, complete_count: 0, draft_count: 0 })
const store = useStore()
const one_screenList = ref([])
const two_screenList = ref([])
const one_sort = ref()
const two_sort = ref()
const searchValue = computed(() => props.searchValue)
const Ua = ref()
const Cl = ref()
const screenDead = ref(true)
const Dr = ref()
const headList = ref()
const showStartMask = ref()
const showEndMask = ref()
const statues = [
	{ name: $t('pages.process.select.approval', '审批中') , num: 'approve_count' },
	{ name: $t('approval.Completed', '已结束') , num: 'null' },
	{ name: $t('pages.task.drafts', '草稿箱') , num: 'draft_count' },
]
const tabClick = (index: number) => {
	nowIndex.value = index
}
const clickisSX = () => {
	screenDead.value = true
	isSX.value = !isSX.value
	store.commit('setIssx', isSX.value)
}
const closeScreen = () => {
	isSX.value = false
	store.commit('setIssx', isSX.value)
}
//下拉刷新
const oneOnRefresh = (a: boolean = true) => {
	// 清空列表数据
	Ua.value.finished = false
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	Ua.value.loading = true
	getNewGetappLi(a)
}
const twoOnRefresh = (a: boolean = true) => {
	// 清空列表数据
	Cl.value.finished = false
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	Cl.value.loading = true
	getNewEndLi(a)
}
const threeOnRefresh = (a: boolean = true) => {
	Dr.value.finished = false
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	Dr.value.loading = true
	getNewDrafts(a)
}
watch(
	searchValue,
	async (newValue: string) => {
		if (nowIndex.value === 0) {
			oneOnRefresh(true)
		} else if (nowIndex.value === 1) {
			twoOnRefresh(true)
		} else {
			threeOnRefresh(true)
		}
	},
	{ deep: true }
)
watch(nowIndex, async () => {
	isHasSX.value = false
	one_screenList.value = []
	two_screenList.value = []
	one_sort.value = ''
	two_sort.value = ''
	screenDead.value = false
	isSX.value = false
	store.commit('setIssx', isSX.value)
	if (nowIndex.value === 0) {
		oneOnRefresh(true)
	} else if (nowIndex.value === 1) {
		twoOnRefresh(true)
	} else {
		threeOnRefresh(true)
	}
})
//懒加载tab0(帅选和非帅选)
const getNewGetappLi = async (a: boolean = false) => {
	if (Ua.value.refreshing || a) {
		getappLi.value = []
		one_page_index.value = 0
		Ua.value.refreshing = false
	}
	let getAL: any = await refreshUA(one_page_index.value)
	one_page_index.value = one_page_index.value + 1
	if (getAL.rows?.length === 0 && JSON.stringify(getappLi.value) === '[{}]') {
		getappLi.value = []
	} else {
		getappLi.value.push(...getAL.rows)
	}
	Ua.value.loading = false
	if (getAL.rows?.length < 20) {
		Ua.value.finished = true
	} else {
		Ua.value.finished = false
	}
}
//懒加载tab1(帅选和非帅选)
const getNewEndLi = async (a: boolean = false) => {
	if (Cl.value.refreshing || a) {
		getEndLi.value = []
		Cl.value.refreshing = false
		two_page_index.value = 0
	}
	let getEL: any = await refreshClose(two_page_index.value)
	two_page_index.value = two_page_index.value + 1
	getEndLi.value.push(...getEL.rows)
	Cl.value.loading = false
	if (getEL.rows?.length < 20) {
		Cl.value.finished = true
	} else {
		Cl.value.finished = false
	}
}
//懒加载tab2(帅选和非帅选)
const getNewDrafts = async (a: boolean = false) => {
	if (Dr.value.refreshing || a) {
		getToTaskLi.value = []
		Dr.value.refreshing = false
		three_page_index.value = 1
	}
	let getTTL: any = await refreshDrafts(three_page_index.value)
	three_page_index.value = three_page_index.value + 1
	getToTaskLi.value.push(...getTTL.rows)
	Dr.value.loading = false
	if (getTTL.rows?.length < 20) {
		Dr.value.finished = true
	} else {
		Dr.value.finished = false
	}
}
//确认筛选
const okScreen = async (screenList: any, sort: number) => {
	if (nowIndex.value === 0) {
		one_screenList.value = screenList
		one_sort.value = sort
	} else {
		two_screenList.value = screenList
		two_sort.value = sort
	}
	if (nowIndex.value === 0) {
		oneOnRefresh(true)
	} else if (nowIndex.value === 1) {
		twoOnRefresh(true)
	}
	isHasSX.value = true
	//调接口根据帅选值重新获得数据
	closeScreen()
}
//刷新
const refreshDrafts = async (page_index = 1) => {
	return await getListDraft({
		page_index,
		page_size: 20,
		time_sort: 'desc',
		name: searchValue.value,
	})
}
const refreshUA = async (page_index = 0) => {
	return await getapplicationList({
		page_index,
		page_size: 20,
		status: 'approve',
		time_sort: one_sort.value ? one_sort.value : 'desc',
		type_key_list: one_screenList.value.join(','),
		subject: searchValue.value,
	})
}
const refreshClose = async (page_index = 0) => {
	return await getapplicationList({
		page_index,
		page_size: 20,
		status: 'End',
		time_sort: two_sort.value ? two_sort.value : 'desc',
		type_key_list: two_screenList.value.join(','),
		subject: searchValue.value,
	})
}
const emitrefreshDrafts = async () => {
	let getTTL: any = await refreshDrafts()
	getToTaskLi.value = getTTL.rows
	let draft_count: any = await getDraftCount()
	allnum.value.draft_count = draft_count.draft_count
}
const scorll = () => {
	if (headList.value) {
		let scrollLeft = headList.value.scrollLeft
		let clientWidth = headList.value.clientWidth
		let scrollWidth = headList.value.scrollWidth
		if (scrollLeft === 0) {
			showStartMask.value = false
		} else {
			showStartMask.value = true
		}
		if (scrollWidth > clientWidth) {
			showEndMask.value = true
			if (scrollLeft + clientWidth >= scrollWidth) {
				showEndMask.value = false
			}
		} else {
			showEndMask.value = false
		}
	} else {
		showStartMask.value = false
		showEndMask.value = false
	}
}
onMounted(async () => {
	scorll()
	//获取数量
	headList.value.addEventListener('scroll', scorll)
	allnum.value = await getAllCount({})
	let draft_count: any = await getDraftCount()
	allnum.value.draft_count = draft_count.draft_count
})
</script>

<style lang="less" scoped>
.tab-head {
	background-color: #fff;

	position: relative;
	padding: 5px 16px 15px;
	height: 50px;
	align-items: center;
	.start-mask {
		pointer-events: none;
		position: absolute;
		z-index: 9;
		left: 0;
		top: 0;
		width: 44px;
		height: 43px;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			#ffffff 87.5%
		);
		transform: rotate(-180deg);
		transition: opacity 0.3s ease;
		opacity: 0;
	}
	.end-mask {
		pointer-events: none;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		z-index: 9;
		right: 38px;
		top: 0;
		width: 44px;
		height: 43px;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			#ffffff 87.5%
		);
		transition: opacity 0.3s ease;
		opacity: 1;
	}
	ul {
		display: flex;
		overflow: scroll;
		width: calc(100vw - 60px);
		display: flex;
		&::-webkit-scrollbar {
			display: none;
		}
		li:not(:last-child) {
			margin-right: 20px;
		}
		li {
			padding-top: 10px;
			padding-bottom: 12px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 16px;
			line-height: 100%;
			position: relative;
			display: flex;
			word-break: keep-all;
			.line {
				position: absolute;
				height: 4px;
				width: 32px;
				left: 50%;
				transform: translateX(-50%);
				top: 90%;
				background: var(--bl-brand-c);
				border-radius: 20px;
			}
		}
	}
	.low-code {
		font-size: 20px;
		padding-bottom: 4px;
		position: absolute;
		top: 50%;
		left: 100%;
		transform: translateX(calc(-100% - 16px)) translateY(-50%);
	}
}
</style>
